<template>
  <section id="login">
    <el-row class="bg-image">
      <div class="login-container">
        <div class="ms-login">
<!--          <el-form ref="form" :model="form" :rules="rules" label-width="80px" hide-required-asterisk>-->
<!--            <el-form-item label="用户名" prop="username">-->
<!--              <el-input v-model="form.username" placeholder="请输入用户名" type="text"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="密码" prop="password">-->
<!--              <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-button type="primary" @click="login('form')">登录</el-button>-->
<!--            </el-form-item>-->
<!--          </el-form>-->


          <el-form ref="form" :model="form" :rules="rules" class="login-form" auto-complete="on" label-position="left">

<!--            <div class="title-container">-->
<!--              <h3 class="title">{{ $t('login.title') }}</h3>-->
<!--              <lang-select class="set-language"/>-->
<!--            </div>-->

            <el-form-item prop="username">
              <span class="svg-container">
                <i class="el-icon-user"></i>
              </span>
              <el-input
                v-model="form.username"
                placeholder="请输入用户名"
                name="username"
                type="text"
                auto-complete="on"
              />
            </el-form-item>

            <el-form-item prop="password">
              <span class="svg-container">
                <i class="el-icon-lock"></i>
              </span>
              <el-input
                :type="passwordType"
                v-model="form.password"
                placeholder="请输入密码"
                name="password"
                auto-complete="on"
                @keyup.enter.native="login('form')" />
              <span class="show-pwd" @click="showPwd">
                <i class="el-icon-eye"></i>
              </span>
            </el-form-item>

            <el-button type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="login('form')">登录</el-button>

          </el-form>
        </div>
      </div>
    </el-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      passwordType: 'password',
      loading: false,
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请填写用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    login(formName) {
      this.loading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.username.trim() === 'KYuser' && this.form.password.trim() === 'KY123456#') {
            this.loading = false;
            this.$router.push('/home')
          } else {
            this.$message.error('用户名或者密码错误')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
  $bg:#283443;
  $light_gray:#eee;
  $lifht_font:#888;
  $cursor: #fff;

  $bg:#2d3a4b;
  $dark_gray:#889aa4;
  $light_gray:#eee;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input{
      color: $cursor;
      &::first-line {
        color: #454545;
      }
    }
  }

  @media screen and (min-width: 320px) and (max-width: 568px) {
    .ms-login{
      width: 340px;
      margin:-190px 0 0 -170px;
    }
  }
  @media screen and (max-width:320px) {
    .ms-login{
      width: 300px;
      margin:-190px 0 0 -150px;
    }
  }
#login {
  height: 100%;
  background-color: #00101a;

  .bg-image {
    height: 100%;
    background-image: url("../assets/images/login-bg-image.png");
    // background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .login-box {
    padding: 350px 50px 0;

    .el-button {
      width: 100%;
    }
  }

  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      // height: 52px;
      width: 84%;
      border-radius: 0 5px 5px 0;

      input {
        /*background: transparent;*/
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0 5px 5px 0;
        padding: 12px 5px 12px 15px;
        color: $lifht_font;
        height: 52px;
        &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255, 0.9) inset !important;
          -webkit-text-fill-color: #454545 !important;
        }
      }
    }
    .el-form-item {
      border: 0px solid rgba(255, 255, 255, 0.1);
      background: rgba(255,255,255, 0.3);
      border-radius: 5px;
      color: #454545;
    }
  }
  .ms-login{
    position: absolute;
    left: 85%;
    top:50%;
    width: 330px;
    margin:-190px 0 0 -240px;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    background: rgba(255,255,255, 0.3);
    overflow: hidden;
  }




  .login-container {
    height: 100%;
    width: 100%;
    background-size: cover;
    justify-content: center;
    display: flex;
    /* .login-form {
       position: absolute;
       left: 0;
       right: 0;
       width: 520px;
       max-width: 100%;
       padding: 35px 35px 15px 35px;
       margin: 120px auto;
     }*/
    .tips {
      font-size: 14px;
      color: #454545;
      margin-bottom: 10px;
      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }
    .svg-container {
      padding: 6px 10px 6px 10px;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
      color: #fff;
    }
    .title-container {
      position: relative;
      margin-bottom: 34px;
      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
      .set-language {
        color: #fff;
        position: absolute;
        top: 5px;
        right: 0px;
      }
    }
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
    .thirdparty-button {
      position: absolute;
      right: 35px;
      bottom: 28px;
    }

  }
}
</style>
